const Panel = require("../gmoon/basePanel");
cc.Class({
    extends: Panel,

    properties: {
    },
    
    onLoad(){
        this._super();
        this._initpos = this.node.getPosition();
        this.node.setPosition( this._initpos.add(cc.v2(-800,0)) );

        this.setAttr("level" , $G.do("playData.level.get"));
        this._scales = [.75 , 1 , .75];
        this._opacitys = [160 , 255 , 160];
        this._elem = {bars:[] , jt:[]};

        this.setAttr("playState" , "noload"); //noload , free , homeshowing , gameshowing , levelgame
        this.whenAttrChange("level" , this.changeLev.bind(this));

        $RES.use(
            "img-levbar-bar",
            "img-levbar-jt",
            "img-levbar-cur"
        ).then(()=>{
            this.setAttr("_loaded" , true );
            this._initComs()
        })
    },

    homeShow(){
        this.node.opacity = 0;
        this.node.setPosition( this._initpos.add( cc.v2(-800, 0)) );
        return new Promise(( res )=>{
            this.pendding(()=>{
                cc.tween(this.node)
                .to(.3 , {position:cc.v2(0, this.node.y) , scale:1 , opacity:255})
                .delay(.6)
                .call(()=>{
                    let cur = this.getAttr("level");
                    this.setAttr("level" , $G.do("playData.level.get"));

                    cur==$G.do("playData.level.get") && (this._elem.cur.opacity = 100);
                })
                .start();
            },
            ()=>{
                return this.getAttr("_inited");
            })
            .then(()=>{
                res();
            })
        })
    },

    //游戏开始前的动画展示
    gameLevelShow(){
        let ws = cc.winSize;
        return new Promise(( res )=>{
            this._elem.cur.opacity = 0;
            cc.tween(this.node)
            .to(0 , {position:this._initpos } )
            .by(.2 , {x:0 , y:60 , scale:.2})
            .call(()=>{
                this.setAttr("level" ,  $G.do("playData.level.get"))
                res(()=>{
                    let pos = cc.v2( 0 , ws.height/2 - this.node.height/2-20 );
                    cc.tween(this.node)
                    .to(.5 , {position: pos , scale:.7})
                    .start();
                    console.log("delus");
                })
            })
            .start();
        });
    },

    _initComs(){
        let num = 3 , 
            node , 
            pos;

        let curnode = curnode || $G.do("oneNode.get");
        $T.setSprite( curnode , $RES.g("img-levbar-cur"));
        curnode.parent = this.node;
        curnode.setPosition(cc.v2(0,-70) );
        this._elem.cur = curnode;
        curnode.opacity = 100;
        curnode.scale = .4;
        curnode._myanimate = cc.tween(curnode)
        .to(.5 , {scale : 1})
        .delay(1)
        .call(()=>{
            curnode.scale = .4;
        })
        .repeatForever();

        curnode._myanimate.start();

        for(let i=0; i<num; i++){
            node = this.setNodeBar( null , i+1);
            pos = node.getPosition();
            if(i==1){
                let jt = $G.do("oneNode.get") , offset = node.width/2 + jt.width/2 + 25 ;
                $T.setSprite( jt , $RES.g("img-levbar-jt") );
                jt.setPosition( pos.sub(cc.v2(offset , 0)) );
                jt.parent = this.node;
                this._elem.jt[0] = jt;

                jt = $G.do("oneNode.get") , offset = node.width/2 + jt.width/2 + 25 ;
                $T.setSprite( jt , $RES.g("img-levbar-jt") );
                jt.setPosition( pos.add(cc.v2(offset , 0)) );
                jt.parent = this.node;
                this._elem.jt[1] = jt;
            }
        }

        this.setAttr("_inited" , true );
    },

    setNodeBar( node , number , len , isOther , curlev){
        len = len || 3;
        node = node || $G.do("oneNode.get");
        curlev = curlev || this.getAttr("level");

        let scales = this._scales ,  i = number-1, 
            opacity = this._opacitys,
            pos;
        !isOther && (this._elem.bars[i] = node);
            
        $T.setSprite( node , $RES.g("img-levbar-bar") );
        pos = cc.v2( $T.compListPoxV(0, i , node.width+40 , len ,1)  , 0 );
        node.setPosition( pos );

        let label = cc.find("oneLabel",node) ,
            labelcom;

        if(!label){
            label = $G.do("oneNode.get" , "oneLabel");
            labelcom = label.addComponent(cc.Label);
            label.parent = node;
        }else{
            labelcom = label.getComponent(cc.Label);
        }
        labelcom.string = curlev + (number - 1)-1 ;

        if( isOther ){
            let v = number == 5 ? (curlev+1) : "";
            v = number == 1 ? (curlev-1) : v;
            
            labelcom.string = v;
        }


        node.scale = $T.select( scales[i],0 );
        node.opacity = $T.select( opacity[i] , 0);
        node.parent = this.node;

        node.on(cc.Node.EventType.TOUCH_START , this.onBarClick.bind(this) );

        return node;
    },

    onBarClick(e){
        let bar = e.target,
            label = $T.find("oneLabel" , bar ).getComponent(cc.Label);
        if(label.string>0){
            this.setAttr("level" , parseInt(label.string) );
        }
    },

    //根据level_v值确定各元素的位置
    barAnimatePoses( lev ){
        let level_v = this.getAttr("bar_level_v");
        level_v = $T.select( level_v , 0);
        let fx = level_v>=0 ? 1 : -1;

        if(!this._elem.tmp){
            let ind = fx>0 ? 0 : 4;
            this._elem.tmp = this.setNodeBar(null , ind+1 , 5 , true , lev);
            for(let i in this._elem.jt){
                this._elem.jt[i].opacity = 10;
            }
            this._elem.cur.opacity = 0;
        }

        if(Math.abs(level_v)>=1 ){
            level_v = fx;
        }

        let bars = this._elem.bars , 
            nodew = bars[1].width,
            stpos ,
            lv = fx * level_v,
            offset = fx * lv * (nodew+40);

        for(let i=0; i<bars.length; i++){
            let myScale = this._scales[i],
                myOpacity = this._opacitys[i];
            let scale = this._scales[i+fx] ? (myScale + (this._scales[i+fx]-myScale)*lv) : (myScale + (0-myScale)*lv) ,
                opacity = this._opacitys[i+fx] ? (myOpacity + (this._opacitys[i+fx]-myOpacity)*lv) : (myOpacity + (0-myOpacity)*lv);
            
            stpos = cc.v2( $T.compListPoxV(0, i , nodew+40 , 3 ,1)  , 0 );
            bars[i].setPosition( stpos.add(cc.v2(offset , 0)) );
            bars[i].scale = scale;
            bars[i].opacity = opacity;
        }
        
        let tmppos = cc.v2( $T.compListPoxV(0, fx>0 ? 0 : 4 , nodew+40 , 5 ,1)  , 0 );
        tmppos = tmppos.add(cc.v2(offset , 0));
        this._elem.tmp.setPosition(tmppos);
        let scale = (0 + (this._scales[0])*lv) ,
            opacity = (0 + (this._opacitys[0])*lv);
        this._elem.tmp.scale = scale;
        this._elem.tmp.opacity = opacity;

        if( Math.abs(level_v) == 1){
            if(level_v>0){
                $G.do("oneNode.put" , bars[2]);
                bars[2] = bars[1];
                bars[1] = bars[0];
                bars[0] = this._elem.tmp;
            }else{
                $G.do("oneNode.put" , bars[0]);
                bars[0] = bars[1];
                bars[1] = bars[2];
                bars[2] = this._elem.tmp;
            }
            this._elem.tmp = null;
            for(let i in this._elem.jt){
                cc.tween( this._elem.jt[i] )
                .to(.08 , {opacity:200})
                .to(.05 , {opacity:50})
                .to(.08 , {opacity:255})
                .call(()=>{
                    if(i==1){
                        cc.tween( this._elem.cur )
                        .to(.06 , {opacity:200})
                        .to(.03 , {opacity:10})
                        .to(.06 , {opacity:100})
                        .start();
                    }
                })
                .start();
                //this._elem.jt[i].opacity = 255;
            }
        }
    },

    changeLev(frm , to , bei ){
        bei = bei || 3;
        let sd = bei;
        let cha = frm - to,
            num = Math.abs(cha),
            fx = num/cha;
        if( num>1 ) sd = 5*(num/2);

        let append = (time , cur )=>{
            this.appendHookHandler("update" , {
                check : ()=>{
                    if( Math.abs(this.getAttr("bar_level_v")) >= 1 ){
                        this.setAttr("bar_level_v" , 0);
                        return true;
                    }else return false;
                },
                destroy : ()=>{
                    if(time>1){
                        append(time-1 , cur-fx);
                    }
                },
                handler : ( dt )=>{
                    let level_v = this.getAttr("bar_level_v");
                    level_v = $T.select( level_v , 0);
                    if(Math.abs(level_v)<1 ){
                        level_v = $T.select( level_v , 0);
                        level_v += fx * dt*sd;
                        this.setAttr("bar_level_v" , level_v );
                    }else{
                        level_v = fx;
                        this.setAttr("bar_level_v" , level_v );
                    }
                    this.barAnimatePoses( cur );
                }
            });
        }

        append(num , frm-fx);
    }
});
